<template>
  <div class="design-box" id="main" ref="main">
    <draggable
      sort="true"
      :list="lowCodeDatas"
      item-key="type"
      @start.stop="startHandle"
      @end.stop="endHandle"
    >
      <div class="design-preview" v-for="(item, index) in lowCodeDatas" :key="index">
        <component
          :is="item.type"
          :configOption="item.dataField"
          :ref="item.id"
          @click.stop="clickComponent(item)"
        ></component>
      </div>
    </draggable>
  </div>
</template>

<script>
import { defineComponent, ref, watch, onMounted } from "vue";
import { VueDraggableNext } from 'vue-draggable-next'
import title from "./baseTitle.vue";
import search from "./baseSearch.vue";
import imageAd from "./baseImageAd.vue";
import tabNav from "./baseTabNav.vue";
import goods from "./baseGoods.vue";
import header from "./baseHeader.vue";
import tabbar from "./baseTabbar.vue";

import useLowCode from "@/store/useBaseLowCode";

export default defineComponent({
  components: {
    draggable:VueDraggableNext,
    head: header,
    tabbar,
    title,
    search,
    imageAd,
    tabNav,
    goods,
  },
  setup() {
    let lowCodeDatas = ref([]);
    // const loadLowCodeJson = () => {
    //   fetch("./lowCode.json")
    //     .then((res) => res.json())
    //     .then((res) => {
    //       lowCodeDatas.value = JSON.parse(res.data.content);
    //     });
    // };
    // loadLowCodeJson()

    let lowCodeLists = useLowCode();

    const clickComponent = (item) => {
      lowCodeLists.setComponentsConfig(item);
    };
    
    const startHandle = (event) => {
      console.log(event);
    };
    const endHandle = (event) => {
      console.log(event);
    };

    onMounted(() => {
      lowCodeDatas.value = lowCodeLists.getLowCodeDatas;
    });

    return {
      lowCodeLists,
      lowCodeDatas,
      clickComponent,
      startHandle,
      endHandle,
    };
  },
});
</script>

<style scoped>
.design-preview:hover{
  border: 1px dashed #409eff;
}
.design-box {
  width: 375px;
  cursor: all-scroll;
  height: 500px;
  overflow: scroll;
  min-height: 760px;
  border: 1px solid #e5e5e5;
  background: #f9f9f9;
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(10%);
}
/* 隐藏垂直滚动条 */
::-webkit-scrollbar {
  width: 0;
}
/* 隐藏水平滚动条 */
::-webkit-scrollbar {
  height: 0;
}
/* 隐藏滚动条的轨道 */
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}
/* 隐藏滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
}
</style>
